/**
 * Created by xlt on 2017/5/10.
 */
/**
 * Created by xlt on 2017/5/10.
 */
import React, {Component, PropTypes}from 'react';
import { connect } from 'react-redux';
import { fetchPosts,reset } from '../../actions';
import { Link , hashHistory } from 'react-router';
import cookie from 'react-cookie';
import Events from '../../utils/Events';
import isEqual from 'lodash/isEqual'
import MyOrderTitle from "../../components/MyOrderTitle";
import OrderData from '../../components/OrderData'

class myOrderSend extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading:true,
            pageindex:1,
            isLoading:true,
            listItems:[]
        }
    }
    componentWillMount() {
        document.title="待发货";
    }
    componentDidMount() {
        //cookie.load("token")
        const header= {"X-Client-ID":"123456","X-Long-Token":cookie.load("token")};
        this.props.dispatch(reset("getOrderList"));
        this.props.dispatch(fetchPosts("getOrderList", header, {"pageindex":this.state.pageindex,"pagesize":10, "orderStatus": 10}));
        this._scrollListener = Events.on(window, 'scroll', this.checkButtom.bind(this))
    }
    componentWillUnmount() {

    }
    addList(lists){
        this.setState({isLoading:lists.length == 10 ? true:false});
        if(this.state.pageindex == 1){
            this.setState({listItems:lists});
        }else{
            this.setState({listItems:this.state.listItems.concat(lists)});
        }
    }
    checkButtom(){
        const header= {"X-Client-ID":"123456","X-Long-Token":cookie.load("token")};
        let scrollTop = document.body.scrollTop,
            innerHeight = window.innerHeight,
            scrollHeight = document.body.scrollHeight,
            pageindex = this.state.pageindex

        if(scrollTop + innerHeight >= scrollHeight && this.state.isLoading ){
            pageindex++;
            this.setState({pageindex:pageindex});
            this.props.dispatch(reset("getOrderList"));
            this.props.dispatch(fetchPosts("getOrderList", header,
                {
                    pageindex:pageindex,
                    pagesize:10,
                    orderStatus: 10
                })
            )
        }
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.orderSendList.errorCode == 0){
            this.setState({
                loading:false
            })
        }
        if(nextProps.orderSendList.errorCode == 0 && !isEqual(nextProps.orderSendList, this.props.orderSendList)  ){
            if(nextProps.orderSendList.data.orderMainVos.length >0){
                this.addList(nextProps.orderSendList.data.orderMainVos);
            }
        }
    }

    render() {
        if(this.state.loading){
            return(<div className="loading"><span>loading</span></div>)
        }else{
            return(
                <div >
                    <div className="mall-bar">
                        <Link to="mall/myOrder">全部</Link>
                        <Link to="mall/myOrderPay">待付款</Link>
                        <Link to="mall/myOrderSend"className="curr">待发货</Link>
                        <Link to="mall/myOrderReceipt">待收货</Link>
                        {/*<Link to="mall/myOrderEvaluate">待评价</Link>*/}
                    </div>
                    <div className="order-list-display">
                        <ul>
                            {this.state.listItems.map((item, index)=>{
                                    return(
                                        <OrderData item={item} key={index}/>
                                    )
                                }
                            )}
                        </ul>
                    </div>
                </div>
            )
        }
    }
}

myOrderSend.propTypes = {
    isFetching: PropTypes.bool.isRequired,
    dispatch: PropTypes.func.isRequired
}
myOrderSend.contextTypes = {
    router:React.PropTypes.object
}

function mapStateToProps(state){
    const { postsByApi } = state
    const {
        isFetching,
        items: orderSendList
    } = postsByApi["getOrderList"] || {
        isFetching: false,
        items: {}
    }
    return {
        orderSendList,
        isFetching
    }
}
export default connect(mapStateToProps)(myOrderSend);

